*{margin:0;padding:0}
@media screen and (min-width: 1367px) and (max-width: 2000px){
    html,body {
        font-size:47px;
    }  
}

@media (max-width: 1367px){
    html,body {
      font-size:30px;
    }  
}
@media (min-width: 2000px){
    html,body {
      font-size:100px;
    }  
}

html,body{
    width:100%;
    height:100%;
    /* font-size:100px; */
}
ul{
    list-style: none;
}
body{
    display: flex;
    background-image: linear-gradient(-179deg, #1B3563 0%, #030A23 97%);
    position: relative;
}

.box{
    flex:1;
    margin:0.36rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    
}
.left{
    width:29.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.right{
    flex:1;
    height:100%;
    margin-left:0.2rem;
    position: relative;
}
.right .right_pic{
    width:100%;
    height:100%;
    z-index:9;
    position: relative;
   
}
.left_top{
    width:100%;
    height:61.5%;
    background:url(../img/左上.png) no-repeat;
    background-size:100% 100%;
    position: relative;
}
.left_bottom{
    width:100%;
    height:37.5%;
    background:url(../img/左下.png) no-repeat;
    background-size:100% 100%;
    position: relative;
   
}

 .bottom_ico{
     width:100%;
     height:24.33%;
     margin-top:22.2788%;
     /* background:red; */
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
 }

 .bottom_ico li:nth-child(1){
    margin-left:18%;
 }
 .bottom_ico li:nth-child(2){
    margin-right:18%;
}
 .bottom_ico li{
    width:1.94rem;
    height:1.94rem;
    position: relative;
 }
 @keyframes Group_7{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);}
 }
.bottom_ico li .Group_7{
    position: absolute;
    left:0;
    top:0;
    width:1.94rem;
    height:1.94rem;
    animation: Group_7 4s linear infinite;
}
.bottom_ico li .Group_7 img{
    width:1.94rem;
    height:1.94rem;
}
.bottom_ico li .money{
    position: absolute;
    left:50%;
    top:50%;
    width:1.33rem;
    height:1.33rem;
    margin-top:-0.665rem;
    margin-left:-0.665rem;
}
.bottom_ico li .money img{
    width:1.33rem;
    height:1.33rem;
    position: absolute;
    left:0;
    top:0;
}
.bottom_ico li .youdi{
    position: absolute;
    left:50%;
    top:50%;
    width:0.93rem;
    height:1.16rem;
    margin-top:-0.58rem;
    margin-left:-0.465rem;
}
.bottom_ico li .youdi img{
    width:0.93rem;
    height:1.16rem;
    position: absolute;
    left:0;
    top:0;
}



 @keyframes play{
    0%  {
        /*
        水平翻转
        */
        transform:rotateY(0deg);
        /*
        垂直翻转
        -webkit-transform:rotateX(0deg);
        顺时针旋转
        -webkit-transform:rotate(0deg);
        逆时针旋转
        -webkit-transform:rotate(0deg);
        */
    }
    100% {
        /* 水平翻转 */
       transform:rotateY(360deg);
        /* 垂直翻转
        -webkit-transform:rotateX(360deg);
        顺时针旋转
        -webkit-transform:rotate(360deg);
        逆时针旋转
        -webkit-transform:rotate(-360deg);
        */
    }
}
 .play{
      /* 设置默认样式，开启3d硬件加速 */
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    /* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
   
    animation:play 2s linear infinite;
 } 
 .bottom_data{
     width:100%;
     display: flex;
     justify-content: space-around;
     margin-top:2%;
 }
 .bottom_data li{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 .bottom_data li span:nth-child(1){
    font-family: PingFangSC-Semibold;
    font-size: 0.8rem;
    color: #C2F2FF;
    letter-spacing: 0;
 }
 .bottom_data li span:nth-child(2){
    font-family: PingFangSC-Regular;
    font-size: 0.48rem;
    color: #C2F2FF;
    letter-spacing: 0;
 }
 .bottom_data li:nth-child(1){
    margin-left:4%;
 }
 .bottom_data li:nth-child(2){
    margin-right:4%;
}
 .Oval{
     width:100%;
     height:66.47%;
     position: relative;
     display: flex;
     justify-content: center;
     /* background: green; */
 }
 @keyframes Oval_9{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
 }
 @keyframes Oval_10{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
 }
 @keyframes Oval_11{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);}
 }
 @keyframes Oval_12{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);}
 }
 .Oval_11{
     width:5.17rem;
     height:5.17rem;
     bottom: 0%;
     left:50%;
     margin-left:-2.585rem;
     position: absolute;
     background: url(../img/Oval_11.png) no-repeat;
     background-size: 100% 100%;
     animation: Oval_11 8s linear infinite;
 }
 .Oval_12{
    width:4.93rem;
    height:4.93rem;
    bottom: 0.12rem;
    left:50%;
    margin-left:-2.465rem;
    position: absolute;
    background: url(../img/Oval_12.png) no-repeat;
    background-size: 100% 100%;
    animation: Oval_12 7s linear infinite;
}
.Oval_10{
    width:4.47rem;
    height:4.47rem;
    bottom: 0.35rem;
    left:50%;
    margin-left:-2.235rem;
    position: absolute;
    background: url(../img/Oval_10.png) no-repeat;
    background-size: 100% 100%;
    /* animation: Oval_10 5s linear infinite; */
}
.Oval_9{
    width:4.14rem;
    height:4.14rem;
    bottom: 0.515rem;
    left:50%;
    margin-left:-2.07rem;
    position: absolute;
    

    background: url(../img/Group_8.png) no-repeat;
    background-size: 100% 100%;
    animation: Oval_9 2s linear infinite;
}
.all_data{
    width:4.14rem;
    height:4.14rem;
    bottom: 0.515rem;
    left:50%;
    margin-left:-2.07rem;
    position: absolute;
    font-family: PingFangSC-Semibold;
    color: #C5F1F9;
    letter-spacing: 0;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;

    /* width:2.5rem;
    height:2.5rem;
    position: absolute; */
    /* bottom: 15%;
    left:50%;
    margin-left:-1.2rem; */
    /* font-family: PingFangSC-Semibold;
    color: #C5F1F9;
    letter-spacing: 0; */
   
}
.all_data h3{
    width:100%;
    font-size: 1.2rem;
    text-align: center; 
    font-weight: 100;
}
.all_data p{
    width:100%;
    font-size: 0.4rem;
    text-align: center;
    margin-top:0.1rem;
}
.target{
    flex:1;
}
.target ul{
    flex:1;
}
.target ul li{
  text-align: center;
}
.target ul li:nth-child(1){
    margin-top:7%;
    font-family: PingFangSC-Medium;
    font-size: 0.48rem;
    color: #C5F1F9;
    letter-spacing: 0;
    display: flex;
    justify-content: space-between;
   margin-left:13%;
   margin-right:13%;
}
.target ul li:nth-child(1) .dong:nth-child(1){
    display: flex;
    width:49%;
    justify-content: center;
}
/*签约站动画*/
.target ul li:nth-child(1) .dong:nth-child(1) .semipolar-spinner .ring{
    border-top-color: #EF5859;
    border-left-color: #EF5859;
}
.target ul li:nth-child(1) .dong:nth-child(2){
    display: flex;
    width:49%;
    justify-content: center;
}
.target ul li:nth-child(1) .dong:nth-child(2) .semipolar-spinner .ring{
    border-top-color: #C5F1F9;
    border-left-color: #C5F1F9;
}
.target ul li:nth-child(1) .dong .semipolar-spinner{
    margin-right:9%;
}
.target ul li:nth-child(2){
    margin-top:4%;
    font-family: PingFangSC-Medium;
    font-size: 0.58rem;
    color: #C2F2FF;
    letter-spacing: 0; 
}
.marker_ico{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.marker_ico p{
    font-family: PingFangSC-Medium;
    font-size: 0.36rem;
    color: #C2F2FF;
    line-height: 0.36rem;
    width:2.16rem;
    height:0.72rem;
    text-align: center;
    position: absolute;
    top:0.72rem;
    left:-110%;

}
.semipolar-spinner, .semipolar-spinner * {
    box-sizing: border-box;
  }

  .semipolar-spinner {
    height: 0.65rem;
    width: 0.65rem;
    position: relative;
  }

  .semipolar-spinner .ring {
    border-radius: 50%;
    position: absolute;
    border: calc(0.65rem * 0.05) solid transparent;
    border-top-color: #ff1d5e;
    border-left-color: #ff1d5e;
    animation: semipolar-spinner-animation 2s infinite;
  }

  .semipolar-spinner .ring:nth-child(1) {
    height: calc(0.65rem - 0.65rem * 0.2 * 0);
    width: calc(0.65rem - 0.65rem * 0.2 * 0);
    top: calc(0.65rem * 0.1 * 0);
    left: calc(0.65rem * 0.1 * 0);
    animation-delay: calc(2000ms * 0.1 * 4);
    z-index: 5;
  }

  .semipolar-spinner .ring:nth-child(2) {
    height: calc(0.65rem - 0.65rem * 0.2 * 1);
    width: calc(0.65rem - 0.65rem * 0.2 * 1);
    top: calc(0.65rem * 0.1 * 1);
    left: calc(0.65rem * 0.1 * 1);
    animation-delay: calc(2000ms * 0.1 * 3);
    z-index: 4;
  }

  .semipolar-spinner .ring:nth-child(3) {
    height: calc(0.65rem - 0.65rem * 0.2 * 2);
    width: calc(0.65rem - 0.65rem * 0.2 * 2);
    top: calc(0.65rem * 0.1 * 2);
    left: calc(0.65rem * 0.1 * 2);
    animation-delay: calc(2000ms * 0.1 * 2);
    z-index: 3;
  }

  .semipolar-spinner .ring:nth-child(4) {
    height: calc(0.65rem - 0.65rem * 0.2 * 3);
    width: calc(0.65rem - 0.65rem * 0.2 * 3);
    top: calc(0.65rem * 0.1 * 3);
    left: calc(0.65rem * 0.1 * 3);
    animation-delay: calc(2000ms * 0.1 * 1);
    z-index: 2;
  }

  .semipolar-spinner .ring:nth-child(5) {
    height: calc(0.65rem - 0.65rem * 0.2 * 4);
    width: calc(0.65rem - 0.65rem * 0.2 * 4);
    top: calc(0.65rem * 0.1 * 4);
    left: calc(0.65rem * 0.1 * 4);
    animation-delay: calc(2000ms * 0.1 * 0);
    z-index: 1;
  }

  @keyframes semipolar-spinner-animation {
    50% {
      transform: rotate(360deg) scale(0.7);
    }
  }
  #time{
      width:5.62rem;
      height:0.67rem;
      position: absolute;
      right:4%;
      top:11%;
      opacity: 0.8;
      font-family: PingFangSC-Medium;
      font-size: 0.48rem;
      color: #C2F2FF;
      letter-spacing: 0;
      z-index:888;
  }
  .week{
      margin-left:8%;
  }
 #city_auto{
     width: 3rem;
     height: 4.8rem;
     margin:20px auto;
     position: absolute;
     overflow: hidden;
     right:2.5%;
     top:50%;
     margin-top: -2rem;
     z-index:1000;
  }
  #city_auto ul{
     width:100%;
     height:100%;
  }
  #city_auto ul li{
    /* font-family: PingFangSC-Semibold;
    font-size: 0.58rem;
    color: #C2F2FF; */
    height:1rem;
    line-height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items:center;
  }
  #city_auto ul li span:nth-child(1){
    width:67%;
    display: flex;
    justify-content: flex-end;
  }
  #city_auto ul li span:nth-child(2){
      display: flex;
      justify-content:center;
      width:0.5rem;
      height:100%;
      align-items: center;
    }
  
  #loadingTip {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    padding: 3px 10px;
    background: red;
    color: #fff;
    font-size: 14px;
}
.opcity_1,#ul li:nth-child(1) span:nth-child(1),#ul li:nth-child(5) span:nth-child(1){
    opacity: 0.2;
    font-family: PingFangSC-Semibold;
    font-size: 0.48rem;
    color: #C2F2FF;
 }
 .opcity_2,#ul li:nth-child(2) span:nth-child(1),#ul li:nth-child(4) span:nth-child(1){
    opacity: 0.5;
    font-family: PingFangSC-Semibold;
    font-size: 0.54rem;
    color: #C2F2FF;
 }
.opcity_3,#ul li:nth-child(3) span:nth-child(1){
   font-family: PingFangSC-Semibold;
   font-size: 0.58rem;
   color: #C2F2FF;
}
.opcity_4{
    font-family: PingFangSC-Semibold;
    font-size: 0.52rem;
    color: #C2F2FF;
    opacity: 0.7;
 }
 .opcity_5{
    font-family: PingFangSC-Semibold;
    font-size: 0.56rem;
    color: #C2F2FF;
    opacity: 0.9;
 }
 
 .opcity_7{
    opacity: 0.3;
    font-family: PingFangSC-Semibold;
    font-size: 0.5rem;
    color: #C2F2FF;
 }
 .opcity_8{
    opacity: 0.7;
    font-family: PingFangSC-Semibold;
    font-size: 0.5rem;
    color: #C2F2FF;
 }
/* ico样式 */
.ico_1,#ul li:nth-child(1) span:nth-child(2) i,#ul li:nth-child(5) span:nth-child(2) i{
    opacity: 0.2;
    background: #C2F2FF;
    width:0.2rem;
    height:0.2rem;
    border-radius: 50%;
}
.ico_2,#ul li:nth-child(2) span:nth-child(2) i,#ul li:nth-child(4) span:nth-child(2) i{
    opacity: 0.5;
    background: #C2F2FF;
    width:0.25rem;
    height:0.25rem;
    border-radius: 50%;
}
.ico_3,#ul li:nth-child(3) span:nth-child(2) i{
    opacity: 1;
    font-family: PingFangSC-Semibold;
    font-size: 0.58rem;
    background: #C2F2FF;
    border-radius: 50%;
    width:0.3rem;
    height:0.3rem;
    box-shadow:0 0 0.4rem 0 rgba(18,188,208,0.50);
}
.ico_4{
    opacity: 0.7;
    font-family: PingFangSC-Semibold;
    font-size: 0.52rem;
    background: #C2F2FF;
    border-radius: 50%;
    width:0.28rem;
    height:0.28rem;
    box-shadow:0 0 0.4rem 0 rgba(18,188,208,0.50);
}
.ico_5{
    opacity: 0.9;
    font-family: PingFangSC-Semibold;
    font-size: 0.56rem;
    background: #C2F2FF;
    border-radius: 50%;
    width:0.27rem;
    height:0.27rem;
    box-shadow:0 0 0.4rem 0 rgba(18,188,208,0.50);
}
.ico_6{
    opacity: 0.3;
    background: #C2F2FF;
    width:0.21rem;
    height:0.21rem;
    border-radius: 50%;
}
.ico_7{
    opacity: 0.3;
    background: #C2F2FF;
    width:0.22rem;
    height:0.22rem;
    border-radius: 50%;
}
.ico_8{
    opacity: 0.1;
    background: #C2F2FF;
    width:0.18rem;
    height:0.18rem;
    border-radius: 50%;
}
#bounced{
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  opacity: 0.91;
  background: #111116;
  z-index:1002;
  display: flex;
  justify-content:center;
  align-items:center;
}
@keyframes bounced{
    from {-webkit-transform: scale(1);}
    to {-webkit-transform:scale(0);}
 }
.bounced_box{
    width:21.89rem;
    height:13.83rem;
    background:url(../img/bounced.png) no-repeat;
    background-size:100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
   
    /* animation: bounced 4s linear infinite */
    
}
.bounced_box h3{
    width:100%;
    opacity: 0.5;
    font-family: PingFangSC-Regular;
    font-size: 0.7rem;
    color: #C5F1F9;
    display: flex;
    justify-content:center;
    margin-top:3.04rem;
    font-weight: inherit;
}
.bounced_box h1{
    width:100%;
    display: flex;
    justify-content:center;
    font-family: PingFangSC-Regular;
    font-size: 1.8rem;
    color: #8FE7FF;
    line-height: 2.5rem;
    margin-top:0.38rem;
    opacity: 50%;
   
    
}
.bounced_box h1 span{
     font-weight: 100;
     text-shadow: 6px 6px 72px #8FE7FF;
}
.bounced_box h4{
    width:100%;
    display: flex;
    justify-content:center;
    font-family: PingFangSC-Medium;
    font-size: 0.6rem;
    color: #C5F1F9;
    margin-top:0.39rem;
}
.bounced_box h5{
    width:80%;
    height:0.04rem;
    background:url(../img/bounced_line.png) no-repeat;
    background-size:100% 100%;
    margin-top:1rem;

}
.bounced_box h2{
    width:100%;
    display: flex;
    justify-content:center;
    font-family: PingFangSC-Medium;
    font-size: 0.81rem;
    color: #C5F1F9;
    margin-top:0.48rem;
}
.bounced_box h2 span{
    font-family: PingFangSC-Semibold;
    font-size: 1.08rem;
    color: #8FE7FF;
    line-height: 1.14rem;
    font-weight: 100;
}
.bounced_box h6{
    width:100%;
    display: flex;
    justify-content:center;
    font-family: PingFangSC-Regular;
   font-size: 0.6rem;
   color: rgba(197,241,249,0.50);
   margin-top:0.39rem;
}
.canvas{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    z-index: 2000;  
}
